<template>
	<div id="toc">
		<div class="toc-box">
			<search-box></search-box>
			<catalogue></catalogue>
		</div>
	</div>
</template>

<script>
import searchBox from '@/components/nav/search-box.vue';
import catalogue from '@/components/common/catalogue.vue';
export default {
	components: {
		searchBox,
		catalogue
	}
};
</script>

<style lang="scss">
#toc {
	width: 25%;
	position: fixed;
	right: 0;
	top: 0;
	.toc-box {
		padding-right: 50px;
		padding-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		.search-box {
			box-shadow: 0 0 16px rgb(0 0 0 / 12%);
			display: flex;
			justify-content: center;
			align-items: center;
			// margin: 0 auto;
			padding: 30px 0;
			width: 320px;
			border-radius: 20px;
		}
	}
}
@media screen and (max-width: 768px) {
	#toc {
		display: none;
	}
}
</style>
